<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
			<view class="logoView">
				<!-- logo -->
				<img class="logo" src="/static/index/logo.jpg" alt="" />
			</view>
			<view class="inputView">
				<input @click="toseach" class="textinput" style="text-align: center;" type="text" value="" placeholder="寻找商品" />
			</view>
		</view>

		<!-- 顶部导航  scroll-view -->

		<view class="tabs">
			<scroll-view id="tab-bar" class="scroll-h" scroll-x="{true}">
				<view class="uni-tab-item" @click="changeGetcate(0)">
					<text :class="getcateIndex == 0?'uni-tab-item-title uni-tab-item-title-active' : 'uni-tab-item-title'">推荐</text>
				</view>
				<view class="uni-tab-item" v-for="(item,index) in getcate" @click="changeGetcate(index+1,item.id,item.catename)">
					<text :class="getcateIndex == index+1?'uni-tab-item-title uni-tab-item-title-active' : 'uni-tab-item-title'">{{item.catename}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐轮播图 -->
		<view class="banner-container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular>
				<swiper-item v-for="(item,index) in getbanner">
					<view class="swiper-item">
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
			<view class="FunctNavLi">
				<image src="@/static/index/xiaohuoban.png" alt class="FunImg" />
				<p>限时抢购</p>
			</view>
			<view class="FunctNavLi">
				<image src="@/static/index/jifentixicopy.png" alt class="FunImg" />
				<p>积分商城</p>
			</view>
			<view class="FunctNavLi">
				<image src="@/static/index/lianxiwomen.png" alt class="FunImg" />
				<p>联系我们</p>
			</view>
			<view class="FunctNavLi" @click="toclassFy">
				<image src="@/static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
				<p>商品分类</p>
			</view>
		</view>

		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
					<image class="LimitedImg" src="@/static/index/xianshi.jpg" alt />
					<label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
					<label class="LimitTime">{{time.h}}</label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{time.m}}</label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{time.s}}</label>
					<label class="Seckill">秒杀</label>
				</view>
				<image :src="seckill.img" class="LimitedgoodsImg" alt="">
			</view>

			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>
					<!-- <div> -->
					<view class="Cloth">
						<image src="@/static/index/goods1.jpg" alt="">
					</view>

					<!-- </div> -->
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="@/static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="@/static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图2 -->
		<div class="Swiper2">
			<image class="Swiper2Img" src="@/static/index/swiper.jpg" alt />
		</div>

		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags" >
				<view  :class="goodsIndex==0?'tag_list active_tag_list' : 'tag_list'" @click="changeTab(0)">
					<label for="">热门推荐</label>
				</view>
				<view   :class="goodsIndex==1?'tag_list active_tag_list' : 'tag_list'" @click="changeTab(1)">
					<label for="">最新好货</label>
				</view>
				<view   :class="goodsIndex==2?'tag_list active_tag_list' : 'tag_list'" @click="changeTab(2)">
					<label for="">所有商品</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product">
				<block v-if="goods.length>0">
					<view class="product" v-for="(item,index) of goods[goodsIndex].content">
						<view class="GoodsLeft">
							<image class="GoodsImg" :src="item.img" alt />
						</view>
						<view class="GoodsCont" >
							<view class="GoodConTit">{{item.goodsname}}</view>
							<view class="GoodsPrice">￥{{item.price}}</view>
							<view class="yimai">已售50件</view>
							<view class="Immed" @click="godetails(item.id)">立即抢购</view>
						</view>
					</view>
				</block>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getcate:[],
				getcateIndex:0,
				getbanner:[], //轮播图数据
				seckill:[], //限时秒杀
				timer:null,
				time:{}, //时间
				goods:[], //商品列表
				goodsIndex:0
			}
		},
		onShow() {
			this._getseckill()
		},
		onLoad() {
			this._getcate()
			this._getbanner()
			this._getindexgoods()
		},
		onHide() {
			if(this.timer)clearInterval(this.timer)
		},
		methods: {
			// /api/getcate
			async _getcate(){
				let res = await this.$Api._getcate();
				this.getcate = res.data.list
			},
			changeGetcate(index,id,catename){
				this.getcateIndex = index
				if(index==0){
					return
				}else{
					uni.navigateTo({
						url:`../product/product?id=${id}&catename=${catename}`
					})
				}
			},
			// 轮播图
		   async _getbanner(){
				let res = await this.$Api._getbanner()
				// console.log(res)
				this.getbanner = res.data.list;
				res.data.list.map((item)=>{
					item.img = this.$baseUrl + item.img
				})
			},
			// 限时秒杀
			async _getseckill(){
				let res = await this.$Api._getseckill()
				res.data.list[0].img = this.$baseUrl + res.data.list[0].img
				this.seckill = res.data.list[0];
				// console.log(this.seckill)
				this.setTimer(res.data.list[0].endtime)
				// console.log(this.seckill)
			},
			// 倒计时
			setTimer(endtime){
				this.timer = setInterval(()=>{
					let t = parseInt((endtime - new Date().getTime()) / 1000);
					let h = parseInt(t / 3600)
					let m = parseInt(t%3600/60)
					let s = parseInt(t%60)
					h = h <=9 ? '0'+h: ''+h,
					m = m <=9 ? '0'+m: ''+m,
					s = s <=9 ? '0'+s: ''+s,
					this.time = {h,m,s}
					// if(this.time == 0){
					// 	uni.showToast({
					// 		title:"活动结束",
					// 		icon::"none"
					// 	})
					// }
				},1000)
			},
			// 商品列表
			async _getindexgoods(){
				let res = await this.$Api._getindexgoods();
				res.data.list.map((item,index)=>{
					item.content.map((v,i)=>{
						v.img = this.$baseUrl + v.img
					})
				})
				this.goods = res.data.list;
				// console.log(this.goods)
			},
			// tab切换
			changeTab(index){
				this.goodsIndex = index
			},
			// 跳转页面
			toclassFy(){
				uni.navigateTo({
					url:"../classify/classify"
				})
			},
			godetails(id){
				uni.navigateTo({
					url:`../details/details?id=${id}`
				})
			},
			// 跳转搜索页面
			toseach(){
				uni.navigateTo({
					url:"../search/search"
				})
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>
